<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
    <h2 th:text="${article.title}">文章标题</h2>
    <p><strong>文章类型：</strong><span th:text="${article.articletype.type}">文章类型</span></p>
    <div th:utext="${article.content}">文章内容</div>
	<!-- 添加评论表单 -->
	<form th:action="@{/reply/save}" method="post">
	    <input type="hidden" name="articleId" th:value="${article.id}" />
	    <div class="mb-3">
	        <label for="content" class="form-label">评论内容：</label>
	        <textarea id="content" name="content" class="form-control" required></textarea>
	    </div>
	    <div class="mb-3">
	        <button type="submit" class="btn btn-primary">提交评论</button>
	    </div>
	</form>
    <h3>评论列表</h3>
    <ul class="list-group">
        <li class="list-group-item" th:each="reply : ${replies}">
            <div><strong>评论内容：</strong><span th:text="${reply.content}">评论内容</span></div>
            <div><strong>用户名称：</strong><span th:text="${reply.user.username}">用户名</span></div>
            <div><strong>评论时间：</strong><span th:text="${#dates.format(reply.createTime, 'yyyy-MM-dd HH:mm:ss')}">评论时间</span></div>
        </li>
    </ul>
    
    <div class="text-center">
        <a class="btn btn-secondary" th:href="@{/article/page?pageIndex=0}" role="button">返回文章列表</a>
    </div>
</div>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>